{% extends "base.html" %}

{% block title %}Excel导出测试文档{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-10 mx-auto">
        <h2 class="mb-4">
            <i class="fas fa-file-export text-info"></i> 测试记录模板生成工具
        </h2>
        
        <div class="alert alert-info">
            <h5><i class="fas fa-info-circle"></i> 功能说明</h5>
            <p>将需求中的多级标题数据导出为Word测试文档，自动生成标题结构并插入测试表格。</p>
            <p class="mb-0"><strong>模板路径：</strong><code>templates/word_templates/test_template.docx</code></p>
        </div>

        <!-- 步骤1: 上传Excel文件 -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-upload"></i> 步骤1：上传Excel文件</h5>
            </div>
            <div class="card-body">
                <form id="uploadForm">
                    <div class="mb-3">
                        <label for="excelFile" class="form-label">选择Excel文件 <span class="text-danger">*</span></label>
                        <input type="file" class="form-control" id="excelFile" name="file" 
                               accept=".xlsx,.xls" required>
                        <div class="form-text">支持 .xlsx 和 .xls 格式，最大16MB</div>
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-cloud-upload-alt"></i> 上传文件
                    </button>
                </form>
                
                <div id="fileInfo" class="mt-3" style="display:none;">
                    <div class="alert alert-success">
                        <h6><i class="fas fa-check-circle"></i> 文件信息</h6>
                        <ul class="mb-0">
                            <li><strong>文件名：</strong><span id="infoFilename"></span></li>
                            <li><strong>工作表：</strong><span id="infoSheetName"></span></li>
                            <li><strong>行数：</strong><span id="infoMaxRow"></span></li>
                            <li><strong>列数：</strong><span id="infoMaxCol"></span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 步骤2: 选择数据区域 -->
        <div class="card mb-4" id="step2Card" style="display:none;">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-crop"></i> 步骤2：选择数据区域</h5>
            </div>
            <div class="card-body">
                <p class="text-muted">请指定要导出的Excel数据区域（包含标题的连续矩形区域）</p>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">起始行</label>
                        <input type="number" class="form-control" id="startRow" 
                               min="2" value="1" placeholder="例如: 1">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">结束行</label>
                        <input type="number" class="form-control" id="endRow" 
                               min="1" value="10" placeholder="例如: 10">
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">起始列</label>
                        <input type="text" class="form-control text-uppercase" id="startCol" 
                               value="B" placeholder="例如: A" maxlength="3"
                               pattern="[A-Za-z]{1,3}" style="text-transform: uppercase;">
                        <div class="form-text">
                            <i class="fas fa-info-circle"></i> 输入Excel列字母（A、B、C...）
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">结束列</label>
                        <input type="text" class="form-control text-uppercase" id="endCol" 
                               value="D" placeholder="例如: D" maxlength="3"
                               pattern="[A-Za-z]{1,3}" style="text-transform: uppercase;">
                        <div class="form-text">
                            <i class="fas fa-lightbulb"></i> 自动计算层级数
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i>
                    <strong>列字母说明：</strong>
                    <ul class="mb-0 mt-2">
                        <li><strong>A列</strong> = Excel第1列（一级标题）</li>
                        <li><strong>B列</strong> = Excel第2列（二级标题）</li>
                        <li><strong>C列</strong> = Excel第3列（三级标题）</li>
                        <li>支持最多9个层级（A-I列）</li>
                    </ul>
                </div>
                
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>数据格式说明：</strong>
                    <ul class="mb-0 mt-2">
                        <li>每列代表一个层级（A列=一级，B列=二级...）</li>
                        <li>使用斜杠 (/ 或 \) 表示继承上一行的值</li>
                        <li>导出时会自动添加固定的一级标题"功能测试记录"</li>
                    </ul>
                </div>
                
                <button type="button" class="btn btn-success btn-lg" id="exportBtn">
                    <i class="fas fa-file-export"></i> 开始导出
                </button>
            </div>
        </div>

        <!-- 步骤3: 导出结果 -->
        <div class="card mb-4" id="resultCard" style="display:none;">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-check-circle"></i> 导出结果</h5>
            </div>
            <div class="card-body" id="resultContent">
                <!-- 结果内容将通过JavaScript动态填充 -->
            </div>
        </div>

        <!-- 数据格式示例 -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-table"></i> Excel数据格式示例</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-sm">
                        <thead class="table-light">
                            <tr>
                                <th>A列（一级）</th>
                                <th>B列（二级）</th>
                                <th>C列（三级）</th>
                                <th>D列（四级）</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>一级功能</td>
                                <td>二级功能</td>
                                <td>三级功能</td>
                                <td>四级功能</td>
                            </tr>
                            <tr>
                                <td>/</td>
                                <td>/</td>
                                <td>/</td>
                                <td>四级功能</td>
                            </tr>
                            <tr>
                                <td>/</td>
                                <td>/</td>
                                <td>三级功能</td>
                                <td>四级功能</td>
                            </tr>
                            <tr>
                                <td>/</td>
                                <td>二级功能</td>
                                <td>三级功能</td>
                                <td>四级功能</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <p class="text-muted mb-0">
                    <small>
                        <i class="fas fa-lightbulb"></i>
                        <strong>说明：</strong>斜杠表示该单元格继承上一行的值，工具会自动处理
                    </small>
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 配置API URL（使用应用前缀）
window.EXCEL_TO_WORD_URLS = {
    upload: '{{ url_for("tools.upload_excel") }}',
    export: '{{ url_for("tools.export_excel_to_word") }}',
    download: '{{ app_prefix }}/tools/download'
};
</script>
<script src="{{ url_for('static', filename='js/excel_to_word.js') }}"></script>
{% endblock %}
